<template>
  <el-dialog v-model="visible" title="导入表" @ok="handleImportTable" :ok-loading="loading" @cancel="handleCloseDialog"
    width="70%">
    <el-form :model="queryForm" ref="queryFormRef" :inline="true">
      <el-form-item prop="tableName" label="表名称">
        <el-input v-model="queryForm.tableName" placeholder="请输入表名称" />
      </el-form-item>
      <el-form-item prop="tableComment" label="表描述">
        <el-input v-model="queryForm.tableComment" placeholder="请输入表描述" />
      </el-form-item>
      <el-form-item>
        <el-space>
          <el-button type="primary" @click="handleQuery" icon="Search"> 搜索</el-button>
          <el-button @click="handleResetQuery" icon="Refresh"> 重置</el-button>
        </el-space>
      </el-form-item>
    </el-form>
    <el-divider />

    <el-table :data="tableData" row-key="tableName" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="表名称" prop="tableName" :width="180" />
      <el-table-column label="表描述" prop="tableComment" :width="180" />
      <el-table-column label="创建时间" :width="180" ellipsis>
        <template #default="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" :width="180" ellipsis>
        <template #default="scope">
          {{ parseTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :page-size="10" v-model="currentPage" layout="prev, pager, next" :total="pager.count"
      @current-change="handlePageChange" />


    <template #footer>
      <span>
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button @click="handleImportTable" type="primary">导入</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
import { listDbTable,importTable,listTable} from '@/api/tools/gen';
import { parseTime } from '@/utils/parseTime'

const { proxy } = getCurrentInstance();
const queryFormRef = ref({});
// 对话框默认值
const visible = ref(true);

// 按钮加载中状态
const loading = ref(false)
const emit = defineEmits(['onClose']);

const handleCloseDialog = () => {
  emit('onClose')
}
// 对话框确认
const handleImportTable = () => {
  loading.value = true
  importTable({ tables: batchList.join(',') }).then(res => {
    if (res.code === 200) {
      proxy.$message.info(res.msg);
      // 关闭对话框
      visible.value = false;
      // 完成刷新下页面
      location.reload();
    } else {
      proxy.$message.info(res.msg);
    }
    loading.value = false
  })
};

const queryForm = reactive({});
// 查询列表信息
const handleQuery = async () => {
  const params = {
    pageIndex: pager.pageIndex,
    pageSize: pager.pageSize,
    ...queryForm,
  };

  getDbTables(params);
};
// 重置搜索
const handleResetQuery = () => {
  queryFormRef.value.resetFields();
  getDbTables(queryForm);
}


const tableData = ref([]);
// Batch Del List
let batchList = [];
// Table 勾选数据
const selectionChange = (rowKeys) => {
  batchList = rowKeys.map((r)=>r.tableName);
  console.log(batchList)
};
/**
 * 分页改变
 * @param {Number} [page]
 */
 const handlePageChange = (page) => {
  pager.pageIndex = page;
  // 修改当前页码
  currentPage.value = page;
  getDbTables({ ...pager, ...queryForm });
};

// 每页数据量
const handlePageSizeChange = (pageSize) => {
  pager.pageSize = pageSize;
  getDbTables({ ...pager, ...queryForm });
};

// 初始页数
const currentPage = ref(1);
// Pager
const pager = {
  count: 0,
  pageIndex: 1,
  pageSize: 10,
};

// 获取列表数据
const getDbTables = async (params = {}) => {
  const { data, code, msg } = await listDbTable(params);
  if ( code == 200 ) {
    tableData.value = data.list;
    Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
  } else {
    proxy.$message.error(msg);
  }
};

onMounted(() => {
  getDbTables(pager);
});
</script>